import React from "react";
import ForgetHeader from "../../../components/Forget/ForgetHeader";
import "./Forget.scss";
import { Form, Input, Button } from "antd-mobile";

export default function Forget() {
  // 提交表单
  const onFinish = (values: any) => {
    console.log(values);
  };
  return (
    <div className="forgetBox">
      <div className="centerbox">
        <Form
          onFinish={onFinish}
          footer={
            <Button
              block
              type="submit"
              size="large"
              style={{
                position: "fixed",
                bottom: "30px",
                width: "74%",
              }}
            >
              下一步
            </Button>
          }
        >
          {/* 邮箱 */}
          <Form.Item
            name="email"
            style={{ width: "90%" }}
            // 正则校验
            rules={[
              { required: true, message: "邮箱不能为空" },
              {
                pattern:
                  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
                message: "请输入正确邮箱",
              },
            ]}
            // 验证码发送按钮
            extra={
              <Button
                color="primary"
                style={{
                  fontSize: 14,
                }}
              >
                发送验证码
              </Button>
            }
          >
            <Input placeholder="请输入邮箱" style={{ width: "100%" }} />
          </Form.Item>
          {/* 验证码 */}
          <Form.Item
            name="code"
            style={{ width: "90%" }}
            // 正则校验
            rules={[{ required: true, message: "验证码不能为空" }]}
          >
            <Input
              placeholder="请输入验证码"
              style={{ width: "100%" }}
              autoComplete="off"
            />
          </Form.Item>
        </Form>
        <div className="loginshadow">
          <div className="loginshadow"></div>
        </div>
      </div>
      <ForgetHeader title="忘记密码"></ForgetHeader>
    </div>
  );
}
